<template>
  <div>
    <a-spin :spinning="loading">
      <div class="container">
        <!-- 商品分类 -->
        <div class="model-form">
          <div class="model-content">
            <div class="mb_20 width_1200_auto">
              <div class="model-item">
                <div class="part-one">
                  <div class='notice-box'>
                    <div class="notice-title">
                      通知公告
                    </div>
                    <ul>
                      <li v-for="article in noticeList" :key="article.id">
                        <h3>
                          <router-link :to="`/news/detail/${article.id}`" target="_blank">
                            <p><span>【置顶】</span>{{article.title}}</p>
                            <span>{{ article.createTime.substr(0,10) }}</span>
                          </router-link>
                        </h3>
                      </li>
                    </ul>
                    <div class="more-box">
                      <router-link :to="'/news'" >
                        更多>>
                      </router-link>
                    </div>
                  </div>

                  <!-- 新增：系统提醒文字 -->
                  <div class="system-reminder">
                    系统提醒：您当前有 <span class="highlight">{{ remainingLessons }}</span> 门课程，请尽快学习，课程即将结束！
                  </div>

                  <div class="start-learning">
                    <div class="learning-title">
                      <div class="learning-icon">
                        <svg class="icon-third" aria-hidden="true" style="font-size: 5px">
                          <use xlink:href="#icon-third-tuijian1"></use>
                        </svg>
                      </div>
                      <div class="learning-type">
                        <h3 @click="changeLearnShow(1)" :class="learnShow ? 'active' : ''">即将开始</h3>
                        <h3  @click="changeLearnShow(2)" :class="!learnShow ? 'active': ''">正在进行</h3>
                        <!-- 模板中 -->
                        <span style="position:absolute;right:35px;">
                          <router-link
                            to="/course"
                            style="text-decoration: none; color: inherit; cursor: pointer;"
                          >
                            更多>
                          </router-link>
                        </span>
                      </div>
                    </div>
                    <div class="learning-course">
                      <div class="start-box" v-show="!learnShow">
                        <ul>
                          <li v-for="item in startCourseList" :key="item.id">
                            <router-link :to="'/course/onlineStudy/'+item.id" >
<!--                              <img :src="item.cover" :title="item.name"/>-->
                              <img :src="getFileAccessHttpUrl(item.cover)" :title="item.name"/>
                            </router-link>
                          </li>
                        </ul>
                      </div>
                      <div class="ing-box" v-show="learnShow">
                        <ul>
                          <li v-if="ingNum" v-for="item in ingCourseList" :key="item.id">
                            <router-link :to="'/course/onlineStudy/'+item.id" >
<!--                              <img :src="item.cover" :title="item.name"/>-->
                              <img :src="getFileAccessHttpUrl(item.cover)" :title="item.name"/>
                            </router-link>
                          </li>
                          <li v-else>
                            <h3>暂无进行中学习活动</h3>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="model-item">
                <div class="model-item-content">
                  <HotCourse />
                </div>
              </div>
              <div class="model-item">
                <div class="model-item-content">
                  <News />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-spin>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { apiStartCourseList } from "@/api/course";
import { getNewsList } from "@/api/news";
import HotCourse from "@/components/course/index/HotCourse.vue";
import News from "@/components/course/index/News.vue";
import defaultImg from "@/assets/img/bg.png";
import { getFileAccessHttpUrl } from "@/utils/compUtils";

// 新增：未完成课时数量（实际项目中需从接口获取）
const remainingLessons = ref<number>();

const loading = ref<boolean>(false);
const bannerList = ref<any>([]);
const noticeList = ref<any>([]);
const newsList = ref<any>([]);
const startCourseList = ref<any>([]);
const ingCourseList = ref<any>([]);
const ingNum = ref<boolean>(true);
const startNum = ref<boolean>(true);
let learnShow = ref<boolean>(false);

// 原有方法保持不变
async function getIndexStartCourse() {
  loading.value = true;
  let searchParams = {
    "pageNo":1,
    "pageSize":3,
    "state":0
  };
  const data: any = await apiStartCourseList(searchParams);
  startCourseList.value = data.result.records;
  if(data.result.records.length == 0){
    startNum.value = false;
  }
  loading.value = false;
}


async function getIndexIngCourse() {
  loading.value = true;
  let searchParams = {
    "pageNo":1,
    "pageSize":3,
    "state":2
  };
  const data: any = await apiStartCourseList(searchParams);
  ingCourseList.value = data.result.records;
  if(data.result.records.length == 0){
    ingNum.value = false;
  }
  loading.value = false;
}

function changeLearnShow(LearnShowType: number){
  if(LearnShowType == 1){
    learnShow.value =  true;
  }else if(LearnShowType == 2){
    learnShow.value =  false;
  }
}

async function getArticleList(){
  const noticeParams = {
    categoryId: '3',
    pageNo:1,
    pageSize: 2,
  }
  const data: any = await getNewsList(noticeParams);
  noticeList.value = data.result.records;
}

onMounted(() => {
  getIndexStartCourse();
  getArticleList();
  getIndexIngCourse();
  getRemainingLessons();
});


async function getRemainingLessons(){
  let searchParams = {
    "pageNo":1,
    "pageSize":3,
    "state":0
  };
  const data: any = await apiStartCourseList(searchParams);
  console.log(1111,data)
  remainingLessons.value =data.result.total
}

</script>

<style scoped lang="scss">
@import "@/assets/style/course/global.scss";
@import '@/assets/style/course/coupon.scss';

.part-one{
  width:100%;
  margin:20px auto;
  padding:30px;
  background-color:rgba(255,255,255,1);
  border-radius :16px;
  .notice-box{
    padding:25px;
    overflow:hidden;
    background-image: linear-gradient(45deg, #acd8fe, #cce8fe);
    .notice-title{
      float:left;
      width:50px;
      font-size:16px;
      color: #0a5ac9;
      letter-spacing: 0px;
      background-color: #ffffff;
      padding: 9px;
    }
    ul{
      float:left;
      width: calc(100% - 120px);
      li{
        h3{
          a{
            color:#333333;
            p{
              width:90%;
              display:inline-block;
              margin-bottom:5px;
              overflow:hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
    }
    .more-box{
      float:right;
      padding:5px;
      margin-top:15px;
      background:#ffffff;
    }
  }

  // 新增：系统提醒样式
  .system-reminder{
    width: 100%;
    padding: 15px 25px;
    margin: 15px 0;
    background-color: #fff8e6;
    border-left: 4px solid #ff9800;
    color: #e65100;
    font-size: 14px;
    .highlight{
      color: #e53935;
      font-weight: bold;
      font-size: 16px;
      margin: 0 5px;
    }
  }

  .start-learning{
    .learning-title{
      margin-top:20px;
      .learning-icon{
        float:left;
      }
      .learning-type{
        overflow:hidden;
        h3{
          float:left;
          width:90px;
          text-align:center;
          cursor:pointer;
          &.active{
            position:relative;
            color:#3585f4;
            &:after{
              content:'';
              position: absolute;
              bottom:-5px;
              left:15px;
              width:60px;
              height:2px;
              background:#3585f4;
            }
          }
        }
      }
    }
    .learning-course{
      .start-box,.ing-box{
        ul{
          overflow:hidden;
          li{
            float:left;
            width:32%;
            margin-left:2%;
            border-radius:16px;
            overflow:hidden;
            text-align:center;
            &:first-child{
              margin-left:0;
            }
            img{
              width:auto;
              height: 200px;
            }
          }
        }
      }
    }
  }
}
.model-item {
  position: relative;
  margin-bottom: 10px;
  .model-item-content{
    width:100%;
    padding:30px;
    background-color:#ffffff;
    border-radius:16px;
  }
}

.container {
  height: 100%;
}

.model-content {
  width: 100%;
  min-height: 1000px;
}

.navTop {
  margin-top: 10px;
}
</style>
